  <button name=extensions onclick=toggleVisibility>
    <img class=no-small alt="Extensions" src="voodoo/assets/icons/spray-can.svg"/>
  </button>
  <aside class="extensions panel">
    <ul>
      <li data-id="all-extensions-page" class="all-link" onclick=openSettings title="See all extensions">
        <a>BrowserBox Extensions</a>
      </li>
    </ul>
    ${_top?.extensions?.length ? G`<hr>` : ''} 
    <ul>${_top?.extensions?.length ? _top.extensions.map(({id: key, name, short_name, options_page, action, side_panel, enabled}) => F`${{key}}
      <li data-id=${key}>
        <a ${enabled?'':'disabled'} onclick=executeAction title="${enabled?
          `Activate ${short_name || name.slice(0,23)}`
          :
          `Deactivated. Re-enable in Extension Settings`
        }">${short_name || name}</a>
        <button onclick=openOptions title="Settings"> 
          <img class=extensions-option alt="Options" src="voodoo/assets/icons/settings-2.svg">
        </button>
      </li>`)
      : 
      F`<!-- cloudtabs extensions -->`
    }</ul>
  </aside>
